<template>
    <g-table class="workflow-examine-info-table" :config="tableConfig" />
</template>

<script lang="tsx">
export default {
    name: 'ExamineInfo'
}
</script>

<script lang="tsx" setup>
import { watch, reactive } from 'vue'
import { TableConfig, TableColumnProps } from 'jn-ve-global'
import dayjs from 'dayjs'
import { size2Rem } from '@jsjn/utils'

const props = withDefaults(defineProps<{ tableData: any[] }>(), {
    tableData: () => []
})

const columns = reactive<TableColumnProps[]>([
    {
        prop: 'activityName',
        label: '环节',
        width: size2Rem(260),
        render(row) {
            return (
                <div class='examine-info-name-cell'>
                    <g-icon icon='el-Promotion'></g-icon>
                    <span>{row.activityName}</span>
                </div>
            )
        }
    },
    {
        prop: 'producer',
        label: '审批人',
        width: size2Rem(360)
    },
    {
        prop: 'operationTypeName',
        label: '动作',
        width: size2Rem(160)
    },
    {
        prop: 'createTime',
        label: '完成时间',
        width: size2Rem(200),
        render(row) {
            return row.createTime
                ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                : row.createTime
        }
    },
    {
        prop: 'content',
        label: '意见/事由'
    }
])

const tableConfig = reactive<TableConfig<any>>({
    instance: null,
    columns: columns,
    data: props.tableData,
    rowClassName({ row }) {
        return `status-${row.operationType.toLowerCase()}`
    }
})
</script>

<style lang="scss" scoped>
.workflow-examine-info-table {
    border: none;
    box-shadow: none;

    :deep(.el-table__inner-wrapper) {
        &:before {
            display: none;
        }

        .examine-info-name-cell {
            display: flex;
            align-items: center;

            .g-icon {
                font-size: 18px;
                margin-right: 4px;
            }
        }

        td.accessory {
            .el-dropdown,
            .el-tooltip__trigger,
            .num {
                width: 100%;
                height: 100%;
            }

            .num {
                display: block;
                cursor: default;
            }
        }

        // 待处理节点变色处理
        tr.status-running {
            td {
                color: var(--el-color-primary);
            }
        }
    }
}
</style>
